<template>
  <div class="flow-container d-flex jc-between">
    <div class="col-block" v-for="(list,i) in flowList" :key="i">
      <a href="/pages/detail" v-for="(item, index) in list" :key="index" class="item-block mb-7">
        <div v-if="item.img" class="poster-block">
          <img :src="item.img">
          <span class="num-bar fs-sm text-white px-4">9图</span>
        </div>
        <div class="content-block py-5 pl-5 pr-3">
          <div class="site-name d-flex ai-center">
            <img src="/static/images/page/site.png" class="site-i mr-3">
            <span class="fs-xl fwb text-ellipsis flex-1">{{item.name}}</span>
          </div>
          <div class="desc text-info fs-md ">酒店地理位置非常好，装修非常精良，设施完善，非常推荐。</div>
          <div class="hostuser-block d-flex ai-center mt-6">
            <img src="/static/images/page/test.png" class="avatar">
            <div class="user-info flex-1 fs-sm">
              <p class="name fwb text-ellipsis">威廉</p>
              <p class="date">2019/1/12</p>
              <img src="/static/images/page/collect-empty.png" class="collect-i">
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
import LoginBox from '@/components/LoginBox'
export default {
  data() {
    return {
      loginBox: false,
      list: [{
        name: '1',
        img: '/static/images/page/test.png',
      }, {
        name: '2',
        img: '',
      }, {
        name: '3',
        img: '/static/images/page/test.png',
      }, {
        img: '4',
      }, {
        name: '5',
        img: '/static/images/page/test.png',
      }, {
        name: '6',
        img: '',
      }, {
        name: '7',
        img: '/static/images/page/test.png',
      }]
    }
  },
  computed: {
    flowList() {
      let L_H = 0
      let R_H = 0
      const Col_L = []
      const Col_R = []
      this.list.forEach(e => {
        if (L_H <= R_H) {
          Col_L.push(e)
          e.img ? L_H += 1.8 : L_H += 1
        } else {
          Col_R.push(e)
          e.img ? R_H += 1.8 : R_H += 1
        }
      });
      return [Col_L, Col_R]
    }
  },

}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.flow-container {
  .item-block {
    width: 330rpx;
    border-radius: 12rpx;
    box-shadow: 0px 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.19);
    overflow: hidden;
    .poster-block {
      position: relative;
      @include wh(100%, 260rpx);
      .num-bar {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
        height: 36rpx;
        line-height: 36rpx;
        background: rgba(40, 40, 40, 1);
        border-radius: 19rpx;
      }
    }
    .content-block {
      .site-i {
        @include wh(20rpx, 30rpx);
      }
      .desc {
        padding-top: 8rpx;
        line-height: 40rpx;
        @include text-overflow(3);
      }
      .hostuser-block {
        position: relative;
        .avatar {
          @include wh(60rpx, 60rpx);
          border-radius: 50%;
          margin-right: 18rpx;
        }
        .collect-i {
          position: absolute;
          bottom: 7rpx;
          right: 17rpx;
          @include wh(28rpx, 28rpx);
        }
      }
    }
  }
}
</style>